MudBlazor - Blazor Component Library

Basic Usage

Drop Zone 1

Drag me!

Just Mud

Drop Zone 2

Or me!

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudDropZone T="DropItem" Identifier="Drop Zone 1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 1</MudText>
         </MudDropZone>
        <MudDropZone T="DropItem" Identifier="Drop Zone 2" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 my-4">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Drag me!", Identifier = "Drop Zone 1" },
        new DropItem(){ Name = "Or me!", Identifier = "Drop Zone 2" },
        new DropItem(){ Name = "Just Mud", Identifier = "Drop Zone 1" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Identifier { get; set; }
    }
}

Nested Drop Zones

Drop Zone 1

Item 1

Item 2

Drop Zone 2

Item 3

<MudDropContainer T="DropZoneItem" Items="_items" ItemsSelector="@((item, dropzone) => item.Zone == dropzone)" ItemDropped="ItemUpdated" Class="4 flex-grow-1">
    <ChildContent>
        <MudDropContainer T="DropZone" Items="_zones" ItemsSelector="@((item, dropzone) => true)" Class="5">
            <ChildContent>
                <MudDropZone T="DropZone" AllowReorder Class="6 rounded mud-background-gray px-4 py-1 ma-4" />
             </ChildContent>
             <ItemRenderer>
                 <MudPaper Class="pa-4 my-4">
                     <MudText Typo="Typo.h6">@context.Name</MudText>
                     <MudDropZone T="DropZoneItem" Identifier="@context.Name" AllowReorder Class="rounded mud-background-gray px-4 py-1 ma-4" />
                 </MudPaper>
             </ItemRenderer>
         </MudDropContainer>
     </ChildContent>
     <ItemRenderer>
         <MudPaper Class="pa-4 my-4">
             <MudText>@context.Name</MudText>
         </MudPaper>
     </ItemRenderer>
 </MudDropContainer>

@code {

    private void ItemUpdated(MudItemDropInfo<DropZoneItem> dropItem) => dropItem.Item.Zone = dropItem.DropzoneIdentifier;

    private List<DropZone> _zones = new()
    {
        new() { Name = "Drop Zone 1" },
        new() { Name = "Drop Zone 2" }
    };

    private List<DropZoneItem> _items = new()
    {
        new() { Zone = "Drop Zone 1", Name = "Item 1" },
        new() { Zone = "Drop Zone 1", Name = "Item 2" },
        new() { Zone = "Drop Zone 2", Name = "Item 3" },
    };

    private class DropZone
    {
        public string Name { get; init; }
    }

    private class DropZoneItem
    {
        public string Zone { get; set; }
        public string Name { get; init; }
    }
}

Transfer items between Drop Zones

The MudDropContainer supports transferring dragged items between its drop zones. The MudDropContainer holds the collection of items used for dragging.

Drop Rules

If a draggable item can be dropped or not can be controlled with the CanDrop function, either globally in the MudDropContainer or per MudDropZone.

Compost Bin

Recycle Bin

Trash Bin

Apple Core

Banana Peel

Old Battery

Pizza Box

Moldy Bread

Paper Bag

Uranium-235

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Place == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
    <ChildContent>
        <div class="d-flex flex-wrap justify-space-between">
            <MudDropZone T="DropItem" Identifier="Compost" CanDrop="@((item) => item.Type == ItemType.Compost)" Class="rounded-lg mud-alert-text-success pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Compost Bin</MudText>
            </MudDropZone>
            <MudDropZone T="DropItem" Identifier="Recycle" CanDrop="@((item) => item.Type == ItemType.Recycle)" Class="rounded-lg mud-alert-text-warning pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Recycle Bin</MudText>
            </MudDropZone>
            <MudDropZone T="DropItem" Identifier="Trash" CanDrop="@((item) => item.Type == ItemType.Trash)" Class="rounded-lg mud-alert-text-info pa-4 ma-4 flex-grow-1">
                <MudText Typo="Typo.button" Class="ma-2">Trash Bin</MudText>
            </MudDropZone>
        </div>
        <MudDropZone T="DropItem" Identifier="Street" CanDrop="@((item) => false)" Class="rounded-lg mud-alert-text-normal pa-4 mt-6 mx-4 flex-grow-1 d-flex flex-wrap"/>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 ma-2">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Place = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Apple Core", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Banana Peel", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Old Battery", Type = ItemType.Trash, Place = "Street" },
        new DropItem(){ Name = "Pizza Box", Type = ItemType.Recycle, Place = "Street" },
        new DropItem(){ Name = "Moldy Bread", Type = ItemType.Compost, Place = "Street" },
        new DropItem(){ Name = "Paper Bag", Type = ItemType.Recycle, Place = "Street" },
        new DropItem(){ Name = "Uranium-235", Type = ItemType.Trash, Place = "Street" },
    };
    
    public class DropItem
    {
        public string Name { get; set; }
        public ItemType Type { get; set; }
        public string Place { get; set; }
    }

    public enum ItemType
    {
        Compost,
        Recycle,
        Trash
    }
}